<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>门卫管理访单</title>
    <meta http-equiv="Expires" content="0">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-control" content="no-cache">
    <meta http-equiv="Cache" content="no-cache">

    <link rel="stylesheet" type="text/css" href="../../jquery-easyui-1.6.7/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../../jquery-easyui-1.6.7/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="../../jquery-easyui-1.6.7/demo/demo.css">
    <link rel="stylesheet" type="text/css" href="../../jquery-easyui-1.6.7/themes/bootstrap/easyui.css">
    <script type="text/javascript" src="../../jquery-easyui-1.6.7/jquery.min.js"></script>
    <script type="text/javascript" src="../../jquery-easyui-1.6.7/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="../../jquery-easyui-1.6.7/jquery.color.js"></script>
    <script type="text/javascript" src="../../jquery-easyui-edatagrid/jquery.edatagrid.js"></script>
    <script type="text/javascript" src="../../jquery-easyui-1.6.7/datagrid-export/datagrid-export.js"></script>
    <script type="text/javascript" src="../../jquery-easyui-1.6.7/locale/easyui-lang-zh_CN.js"></script>

    <link rel="stylesheet" type="text/css" href="../../KendoUI/styles/kendo.common.min.css" />
    <link rel="stylesheet" type="text/css" href="../../KendoUI/styles/kendo.default.min.css" />
    <link rel="stylesheet" type="text/css" href="../../KendoUI/styles/kendo.default.mobile.min.css" />
    <link rel="stylesheet" type="text/css" href="../../KendoUI/styles/kendo.rtl.min.css" />
    <script type="text/javascript" src="../../KendoUI/js/jszip.min.js"></script>
    <script type="text/javascript" src="../../KendoUI/js/kendo.all.min.js"></script>
    <script type="text/javascript" src="../../KendoUI/js/messages/kendo.messages.zh-CN.min.js"></script>

    <script type="text/javascript" src="../js/XLSX/xlsx.js"></script>

    <script src="../../publicJS/publicJS.js" type="text/javascript"  ></script>
    <script src="../../publicJS/systemConst.js" type="text/javascript"  ></script>
    <script src="../js/showavisitor_guard.js?version=1.10" type="text/javascript"></script>



    <style type="text/css">
        .k-grid tr.k-state-selected {
            background-color: #afe8ab; /* 自定义选中行的背景色 */
        }
        .k-grid tr.k-state-selected,
        .k-grid tr.k-state-selected:hover,
        .k-grid tr.k-state-hover {
            background-color: #afe8ab; /* 自定义选中行和悬停行的背景色 */
        }
        /*13e072 40E0D0*/
        .datagrid-header .datagrid-cell {
            vertical-align: middle; /* 垂直居中对齐 */
            white-space: normal;  /* 允许内容换行 */
            text-align: center; /* 水平居中对齐 */
            line-height: normal; /* 垂直居中对齐 */
        }
        .k-grid-header th .k-header  {
            vertical-align: middle;
        }
        /* 设置标题自动换行和居中对齐 */
        .k-grid-header .k-header span {
            display: inline-block;
            white-space: normal;
            text-align: center;
        }

        .combobox-item,
        .combobox-group,
        .combobox-stick {
            font-size: 15px;
            padding: 6px 4px;
            line-height: 20px;
        }
        .textbox .textbox-text {
            font-size: 15px;
        }
        .plan_main {
            position: absolute;top:1px;bottom:1px;right:1px;left: 1px; background: #FEFCFB; /*  border: 0px solid red;*/
            padding: 10px;
        }
        .plan_top {
            height: 35px;width: 100%;float: left;background: #F6F2F1;border: 1px solid #F6F2F1 ;
            display: flex;flex-direction: row;justify-content: space-between;align-items: center;
        }
        .plan_text {height: calc(100% - 40px);width: 100%;float: left;background: #FFFCFB;border: 1px solid #DBCFC3 ;}

        input[type="checkbox"][readonly] {
            pointer-events: none;
        }
        /*
        #countdown {
            position: fixed;
            top: 20px;
            right: 20px;
            width: 200px;
            font-size: 1.2em;
            color: #333;
            height: 100%;
            text-align: left;
            align-items: center;
        }
         */

        .plan_top_left_container {
            width: 270px;
            display: flex;
            flex-direction: row;
            justify-content: space-around;
            align-items: center;
        }
        .btns {
            width: 145px;
            display: flex;
            flex-direction: row;
            justify-content: space-around;
            align-items: center;
        }
        .plan_top_right_container {
            width: 220px;
            height: 100%;
            display: flex;
            flex-direction: row;
            justify-content: space-around;
            align-items: center;
            /*background-color: #0a4d85;*/
        }
        .auto-refresh {
            width: 75px;
            /*height: 100%;*/
            background-color: red;
        }
    </style>
</head>
<body>
<div class="plan_main">
    <div class="plan_top">
        <div class="plan_top_left_container">
            <div class="plandate" style="border: 0px solid red;width: 150px;padding: 4px">
                <input id="esl" style="height: 50px;width: 140px;" type="text" name="" placeholder="扫码"/><br>
            </div>
            <div class="btns">
                <a class="easyui-linkbutton plandate" onclick="btn_refresh()" data-options="iconCls:'icon-search',iconAlign:'top',width:45,height:55">查询</a>
            </div>
        </div>
        <!--            <a class="easyui-linkbutton" onclick="btn_cancel_filter()" data-options="iconCls:'icon-remove',iconAlign:'top',width:60,height:55">清除过滤</a>-->
        <!--            <a class="easyui-linkbutton" onclick="btn_export()" data-options="iconCls:'icon-sum',iconAlign:'top',width:80,height:55">导出Excel</a>-->
        <!--            <a class="easyui-linkbutton" onclick="closeTab()" data-options="iconCls:'icon-no',iconAlign:'top',width:50,height:55">关闭</a>-->

<!--        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#dlg-msg-audit').dialog('open')">Open</a>-->
<!--        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#dlg-msg-audit').dialog('close')">Close</a>-->

        <div class="plan_top_right_container">
<!--            <div class="countdown" id="countdown">剩余5秒自动刷新</div>-->
<!--            <div class="auto-refresh" id="countdown">剩余5秒自动刷新</div>-->
            <span id="countdown">剩余5秒自动刷新</span>
            <a class="easyui-linkbutton" onclick="fullScreen()" data-options="width:45,height:55">全屏</a>
            <a class="easyui-linkbutton" onclick="exitFull()" data-options="width:45,height:55">退出全屏</a>
        </div>
    </div>
    <div class="plan_text">
        <table id="bill"></table>
    </div>
</div>

<!-- 显示访单信息的对话框 -->
<div id="FHwin" title="进厂信息提示!!!">
    <form id="form" method="post">
        <div style="width:100%;height:380px;text-align: center;padding-top: 20px;border: 1px solid #DDDDDD;">

            <div style="display: none;"><input name="id" id="id" class="easyui-textbox" data-options="label:'id:',labelAlign:'right',width:'370',height:'28',labelWidth:120"></div>

            <div class="toptext"><input name="visitorRealName" class="easyui-textbox" data-options="label:'访客姓名:',labelAlign:'right',width:'370',height:'28',labelWidth:120"></div>
            <div class="toptext"><input name="visitorCompany" class="easyui-textbox" data-options="label:'访客公司:',labelAlign:'right',width:'370',height:'28',labelWidth:120"></div>
            <div class="toptext"><input name="intervieweeRealName" class="easyui-textbox" data-options="label:'受访人员:',labelAlign:'right',width:'370',height:'28',labelWidth:120"></div>
            <div class="toptext"><input name="intervieweeDepartment" class="easyui-textbox" data-options="label:'部门:',labelAlign:'right',width:'370',height:'28',labelWidth:120"></div>
            <div class="toptext"><input name="category" class="easyui-textbox" data-options="label:'来访类型:',labelAlign:'right',width:'370',height:'28',labelWidth:120"></div>
            <div class="toptext"><input name="carNumber" class="easyui-textbox" data-options="label:'车牌号:',labelAlign:'right',width:'370',height:'28',labelWidth:120"></div>
            <div class="toptext"><input name="numberOfPeople" class="easyui-textbox" data-options="label:'随行人数:',labelAlign:'right',width:'370',height:'28',labelWidth:120"></div>
            <div class="toptext"><input name="startTime" class="easyui-textbox" data-options="label:'起始时间:',labelAlign:'right',width:'370',height:'28',labelWidth:120"></div>
            <div class="toptext"><input name="endTime" class="easyui-textbox" data-options="label:'终止时间:',labelAlign:'right',width:'370',height:'28',labelWidth:120"></div>

        </div>
    </form>
    <div style="width:50%;height:50px;text-align: center;border: 1px solid #DDDDDD;float: left">
        <input id="btnSetProgress" type="button" style="width:100%;height:100%;border: none;font-size: 36px;color: red" value='未知' onclick="setEntryOrLeave()" />
    </div>
    <div style="width:50%;height:50px;text-align: center;border: 1px solid #DDDDDD;float: left">
        <button style="width:100%;height:100%;border: none;font-size: 36px;color: #0000FF" onclick="$('#FHwin').window('close')">关 闭</button>
    </div>
</div>

<!--  访单处于待审核状态时显示本对话框，使门卫通知受访者审核访单  -->
<div id="dlg-msg-audit" class="easyui-dialog" title="先电话受访者审核访单"
     data-options="iconCls:'icon-save',closed:true"
     style="width:100%;height:300px;padding:10px;display: flex;flex-direction: column;justify-content: space-around">

    <div style="color:blue;font-size: 40px;width: 100%; text-align: center;">请电话 【<span id="dlg-msg-phone">12345678901</span>】</div>
    <div style="color:blue;font-size: 40px;width: 100%; text-align: center;">受访者【<span id="dlg-msg-name">张三</span>】审核本访单后重新扫码！</div>
    <div style="width: 100%;text-align: center;display: flex;flex-direction: row;justify-content: center">
        <div style="background-color: #ffcc34;color: red;font-size: 40px;width: 200px;height: 60px;border-radius: 10%;"
             onclick="$('#dlg-msg-audit').dialog('close')">关 闭</div>
    </div>
</div>

<div id="dlg-msg-common" class="easyui-dialog" title="提示" data-options="iconCls:'icon-save',closed:true" style="width:100%;height:300px;padding:10px;display: flex;flex-direction: column;justify-content: space-around">
    <div style="color:blue;font-size: 40px;width: 100%; text-align: center;"><span id="dlg-msg-content">xxxx</span></div>
    <div style="width: 100%;text-align: center;display: flex;flex-direction: row;justify-content: center">
        <div style="background-color: #ffcc34;color: red;font-size: 40px;width: 200px;height: 60px;border-radius: 10%;" onclick="$('#dlg-msg-common').dialog('close')">关 闭</div>
    </div>
</div>

<!-- 通用基于对话框的消息提示 -->
<div id="dlg-msg" class="easyui-dialog" title="提示"
     data-options="iconCls:'icon-save',closed:true"
     style="width:100%;height:300px;padding:10px;display: flex;flex-direction: column;justify-content: space-around">
    <div style="color:blue;font-size: 40px;width: 100%; text-align: center;"><span id="dlg-msg-prompt">提示文案</span></div>
    <div style="width: 100%;text-align: center;display: flex;flex-direction: row;justify-content: center">
        <div style="background-color: #ffcc34;color: red;font-size: 40px;width: 200px;height: 60px;border-radius: 10%;"
             onclick="$('#dlg-msg').dialog('close')">关 闭</div>
    </div>
</div>


</body>

<style type="text/css">
    /* 文本框之间夹层div 属性 */
    .interlayer {
        /* border: 0px solid red; width: 400px;float: left;margin: auto;text-align: center; */
        border: 0px solid red; width: 300px;height: 7px;float: left;margin: auto;text-align: center;
    }

    .toptext{
        float: left;
        padding-top: 5px;
        font-size: 21px
        /* border: 1px solid red; */
    }
    .textbox .textbox-text{
        font-size: 21px
    }

    .plan_main {
        position: absolute;
        top:1px;
        bottom:1px;
        right:1px;
        left: 1px;
        /*  border: 0px solid red;*/
        background: #FEFCFB;
    }

    .plan_top {
        height: 60px;
        width: 100%;
        float: left;
        background: #F6F2F1;
        border: 1px solid #F6F2F1 ;
    }

    .plan_text {
        height: calc(100% - 60px);
        width: 100%;
        float: left;
        background: #FFFCFB;
        border: 1px solid #DBCFC3 ;
        /* border: 0px solid red ; */
    }

    .plandate {
        height: 60px;
        width: 200px;
        float: left;

    }

    .demos {
        height: 30px;
        width: 200px;
        float: left;

    }

    .demos label{
        font-size: 14px;
        text-align:right;
    }

</style>

</html>
